<!-- 倒计时组件 -->
<template>
    <div>
        <span>获取验证码({{ count }}s)</span>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
defineOptions({
    name: "CountDown"
})


/* 数据 */
// 计时器的起始数字
let count = ref<number>(5)
// 接收自定义事件
let $emit = defineEmits(['closeShowCount'])


/* 方法 */
// 倒计时
onMounted(() => {
    const timer = setInterval(() => {
        count.value--;
        if (!count.value) {
            // count 为零时清除定时器
            clearInterval(timer)
            // 调用父组件的方法
            $emit('closeShowCount')
        }
    }, 1000)
})
</script>

<style scoped></style>